<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务中项目查询</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <link href="./css/service_project.css" rel="stylesheet">
</head>

<body>
    <div class="uxt-page">
        <div class="layui-card">
            <div class="layui-card-header">服务中项目查询</div>
            <div class="layui-card-body">
                <!-- 搜索区域 -->
                <div class="uxt-toolbar">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <!-- 左侧搜索区域 -->
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">搜索</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchInput" placeholder="项目名/合同名称"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <!-- 右侧操作区域 -->
                            <div class="uxt-actions" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-sm" id="btnSearch"><i
                                        class="layui-icon">&#xe615;</i> 搜索</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btnReset"><i
                                        class="layui-icon">&#xe669;</i> 重置</button>
                                <button class="layui-btn layui-btn-sm" id="btnAddProject"><i
                                        class="layui-icon">&#xe654;</i> 添加项目</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 筛选条件区域 -->
                <div class="region-filter">
                    <div class="layui-form layui-form-inline">
                        <div class="layui-form-item">
                            <label class="layui-form-label">区域筛选</label>
                            <div class="layui-input-inline">
                                <button class="layui-btn layui-btn-primary" id="regionDropdown">
                                    <span id="regionDisplay">全部区域</span>
                                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">撤场状态</label>
                            <div class="layui-input-inline">
                                <button class="layui-btn layui-btn-primary" id="withdrawDropdown">
                                    <span id="withdrawDisplay">全部</span>
                                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 项目卡片列表 -->
                <div class="project-cards" id="projectCards">
                    <!-- 项目卡片将通过JS动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 项目表单模板 -->
    <script type="text/html" id="tplProjectForm">
        <form class="layui-form" lay-filter="projectForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="projectName" required lay-verify="required" autocomplete="off" placeholder="请输入项目名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">项目简称</label>
                <div class="layui-input-block">
                    <input type="text" name="projectShortName" placeholder="请输入项目简称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属区域</label>
                <div class="layui-input-block">
                    <select name="region" lay-verify="required">
                        <option value="">请选择区域</option>
                        <option value="华东区域">华东区域</option>
                        <option value="华南区域">华南区域</option>
                        <option value="华北区域">华北区域</option>
                        <option value="华中区域">华中区域</option>
                        <option value="西南区域">西南区域</option>
                        <option value="西北区域">西北区域</option>
                        <option value="东北区域">东北区域</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">服务区域</label>
                <div class="layui-input-block">
                    <input type="text" name="serviceArea" placeholder="请输入服务区域" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">项目人数</label>
                <div class="layui-input-block">
                    <input type="number" name="projectMemberCount" placeholder="请输入项目人数" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">合同名称</label>
                <div class="layui-input-block">
                    <input type="text" name="contractName" placeholder="请输入合同名称" class="layui-input">
                </div>
            </div>
            <!-- 操作按钮由 JS 通过 layer.open 的 btn 参数生成，这里不内置按钮 -->
        </form>
    </script>

    <script src="./layui/layui.js"></script>
    <script src="./js/service_project.js"></script>
</body>

</html>
